<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <title>用户管理模块</title>
</head>

<body>
    <div class="container" style="padding:20px ">
        <button id="add" class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增</button>
        <button onclick="delect()" id="delect" class="btn btn-primary">删除</button>
        <button id="edit"   class="btn btn-primary" data-toggle="modal" data-target="#myModal" >编辑</button>
        <button id="select" onclick="select()" class="btn btn-primary">查询</button>
        <input type="text" id="NoSelect" placeholder="按工号查询">
        <input type="text" id="NameSelect" placeholder="按姓名查询">
    </div>

    <!-- 声明定义模态框组件 -->
    <div class="modal" id="myModal" data-backdrop="static">
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">
                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">请输入用户信息</h4>
                </div>
                <!-- 2.框内信息 -->
                <div class="modal-body">
                    请输入工号：<input id="num" ><br />
                    请输入姓名：<input id="name" ><br />
                    请输入性别：<input id="sex" ><br />
                    请输入密码：<input id="password" ><br />
                    请输入年龄：<input id="age" ><br />
                    请输入出生日期：<input id="time" >
                </div>
                <!-- 3.框的按钮 -->
                <div class="modal-footer">
                    <button class="btn btn-info" id="Nadd" data-dismiss="modal" >确定</button>
                    <button class="btn btn-info" data-dismiss="modal"  onclick="insert()">修改</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <div style="margin:10px auto;padding-left: 100px;padding-right: 100px;padding-bottom:100px;">
        <table class="table table-responsive">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>工号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>出生日期</th>
                </tr>
            </thead>
            <tbody id="tianjia">
                <tr class="info" name="xx">
                    <td >
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="chose">
                            </label>
                        </div>
                    </td>
                    <td name="gonghao">1001</td>
                    <td name="xingming">张三</td>
                    <td>女</td>
                    <td>1234</td>
                    <td>29</td>
                    <td>1991-1-1</td>
                </tr>
                <tr class="warning" name="xx">
                    <td >
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="chose">
                            </label>
                        </div>
                    </td>
                    <td name="gonghao">1002</td>
                    <td name="xingming">李四</td>
                    <td>男</td>
                    <td>1234</td>
                    <td>28</td>
                    <td>1992-2-2</td>
                </tr>
                <tr class="info" name="xx">
                    <td >
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="chose">
                            </label>
                        </div>
                    </td>
                    <td name="gonghao">1003</td>
                    <td name="xingming">王五</td>
                    <td>女</td>
                    <td>1234</td>
                    <td>27</td>
                    <td>1993-3-3</td>
                </tr>
                <tr class="warning" name="xx">
                    <td >
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="chose">
                            </label>
                        </div>
                    </td>
                    <td name="gonghao">1004</td>
                    <td name="xingming">赵六</td>
                    <td>女</td>
                    <td>1234</td>
                    <td>26</td>
                    <td>1994-4-4</td>
                </tr>
            </tbody>
        </table>
    </div>


    <script src="js/jquery-3.3.1.min.js"></Script>
    <script src="js/bootstrap.min.js"></Script>
    <script src="js/jquery-3.4.1.min.js"></Script>
    <script>
        $("#Nadd").click(function () {
            var num = document.getElementById("num").value;
            var name = document.getElementById("name").value;
            var sex = document.getElementById("sex").value;
            var password = document.getElementById("password").value;
            var age = document.getElementById("age").value;
            var time = document.getElementById("time").value;
            var newUser = $(" <tr class='info' name='xx'><td ><div class='checkbox'><label><input  name='chose' type='checkbox'></label></div></td><td>"+num+"</td><td>"+name+"</td><td>"+sex+"</td><td>"+password+"</td><td>"+age+"</td><td>"+time+"</td></tr>"
            );
            $("#tianjia").append(newUser);
        });

        function delect(){
          var arr = document.getElementsByName("chose");
          var arr2 = document.getElementsByName("xx");
          for(var i = 0; i<arr.length;i++){
              if(arr[i].checked == true){
                 arr2[i].parentNode.removeChild(arr2[i]);
              }
          }
        }

        function insert(){
            var arr = document.getElementsByName("chose");
            var arr2 = document.getElementsByName("xx");
            for(var i = 0; i<arr.length;i++){
              if(arr[i].checked == true){
                arr2[i].parentNode.removeChild(arr2[i]);
                var num = document.getElementById("num").value;
                var name = document.getElementById("name").value;
                var sex = document.getElementById("sex").value;
                var password = document.getElementById("password").value;
                var age = document.getElementById("age").value;
                var time = document.getElementById("time").value;
                var newUser = $(" <tr class='info' name='xx'><td ><div class='checkbox'><label><input  name='chose' type='checkbox'></label></div></td><td name='gonghao'>"+num+"</td><td name='xingming'>"+name+"</td><td>"+sex+"</td><td>"+password+"</td><td>"+age+"</td><td>"+time+"</td></tr>"
                );
                $("#tianjia").append(newUser);
              }
          }
        }

        function select(){
            var no = document.getElementById("NoSelect").value;
            var name = document.getElementById("NameSelect").value;
            var arr = document.getElementsByName("gonghao");
            var arr2 = document.getElementsByName("xingming");
        }
    </script>
</body>

</html>